















{% load static %}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>layout 管理界面大布局示例 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
  <style>
    table img {
      width: 90px;
    }
  </style>
</head>

<body>
  <div class="layui-layout layui-layout-admin">
      {% include 'header.html' %}
      <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">
        <button type="button" class="layui-btn" onclick="location.href='/user/add'">
          <i class="layui-icon layui-icon-add-circle"></i> 添加用户
        </button>
        <table class="layui-table">
          <thead>
            <tr>
              <th>编号</th>
              <th>头像</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>分类</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="list">
            {% for user in users %}
            <tr>
                <td>{{ user.id }}</td>
                <td><img src="{% static 'imgs/' %}{{ user.icon }}" alt=""></td>
                <td>{{ user.username }}</td>
                <td>{{ user.age}}</td>
                <td>老师</td>
                <td>
                <button class="layui-btn layui-btn-xs layui-btn-normal"onclick="location.href='/user/edit/?id={{user.id}}'">编辑</button>
                <button class="layui-btn layui-btn-xs layui-bg-red" onclick="del({{ user.id }})">删除</button>
            </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        <div id="demo-laypage-normal-1"></div>
      </div>
      <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
      </div>
    </div>
    <script src="{% static 'js/jquery.js' %}"></script>
    <script src="{% static 'layui/layui.js' %}"></script>
    <script>
      //定义一个是已加载的标志，没有加载去请求json，已加载直接使用
      //is_load 存入localstorage
      var is_load = localStorage.getItem('is_load')
      console.log(is_load);
      //数据加载
      function loaddata(data) {
          return
        var res = ''
        for (const item of data) {
          //找到DOM节点，传数据
          res +=
            `<tr>
              <td>${item.id}</td>
              <td><img src="{% static '/imgs/' %}${item.icon}" alt=""></td>
              <td>${item.username}</td>
              <td>${item.age}</td>
              <td>${item.category}</td>
              <td>
                <button class="layui-btn layui-btn-xs layui-btn-normal" onclick="location.href='./useredit.html?id=${item.id}'">编辑</button>
                <button class="layui-btn layui-btn-xs layui-bg-red" onclick="del(${item.id})">删除</button>
              </td>
            </tr>`
        }
        var list = document.querySelector("#list")
        list.innerHTML = res
      }
      //TODO: 使用Ajax请求json数据，并渲染到页面中
      window.onload = function () {
        if (!is_load) {
          $.ajax({
            url: "{% static 'data.json' %}",
            method: "GET",
            success: function (res) {
              console.log(res.data);
              //1. TODO： 保存数据，保证数据能够使用
              localStorage.setItem('users', JSON.stringify(res.data))
              is_load = true
              localStorage.setItem('is_load', true)
              //2. 数据的渲染
              loaddata(res.data)
            },
            error: function (err) {
              console.log(err);
            }
          })
        } else {
          console.log("已加载直接使用localStorage");
          //已加载直接使用localStorage。取出，转换成obj
          var userlist = localStorage.getItem('users')
          userlist = JSON.parse(userlist)
          loaddata(userlist)
        }
      }

      function del(id) {
        //TODO: 点击删除按钮，弹出提示框，并把用户名显示在提示框中
        // TODO: 把id换成姓名
        layer.confirm(`确认删除: ${id}？`, {
          btn: ['确定', '取消'] //按钮
        }, function () {
            //TODO：点击确定，从localStorage移除
            //1. 取出数据；
            $.ajax({
                url: '/user/del/', // 请求的URL地址
                method: 'post', // 请求方法
                data: { // 发送到服务器的数据
                    user_id: id, // 用户ID
                    csrfmiddlewaretoken: '{{ csrf_token }}' // CSRF令牌，用于防止跨站请求伪造
                },
                success: function (res) { // 请求成功后的回调函数
                    console.log(res); // 在控制台打印服务器返回的结果
                    layer.msg(res.msg); // 弹出服务器返回的消息
                    if (res.code > 0) { // 如果服务器返回的code大于0，表示有错误
                        setTimeout(function () {
                            location.reload()},2000); // 2秒后刷新页面
                    }
                },
                error: function (err) { // 请求失败后的回调函数
                    console.log(err); // 在控制台打印错误信息
                }
            })
        });
      }
      //JS
      layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var laypage = layui.laypage;
        var $ = layui.$;

        //分页
        laypage.render({
          elem: 'demo-laypage-normal-1',
          count: 50 // 数据总数
        });

        //头部事件
        util.event('lay-header-event', {
          menuLeft: function (othis) { // 左侧菜单事件
            layer.msg('展开左侧菜单的操作', { icon: 0 });
          },
          menuRight: function () {  // 右侧菜单事件
            layer.open({
              type: 1,
              title: '更多',
              content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
              area: ['260px', '100%'],
              offset: 'rt', // 右上角
              anim: 'slideLeft', // 从右侧抽屉滑出
              shadeClose: true,
              scrollbar: false
            });
          }
        });
      });
    </script>
  </div>
</body>>

</html>